<template>
    <div id='gamecard_list'>
      <div class="search-box">
        <Row type="flex" align='middle' style="padding-top: 24px;">
          <Col style="width: 8px ;height: 20px;background: #2D8CF0;" class="search-item"></Col>
          <Col style="margin-left: 10px">
            <h3>{{this.$route.query.shopName}} - 游戏卡</h3>
          </Col>
        </Row>
        <Row type="flex">
          <Row type="flex" justify="start" class="search-item-left">
            <Col class="search-item">
              <span class="search-label">商品名称：</span>
              <Input placeholder="请输入" v-model='searchName'></Input>
            </Col>
            <!-- <Col class="search-item">
              <span class="search-label">显示状态：</span>
              <Select v-model="status" @on-change="doSearch" style="width:180px" placeholder='请选择'>
                <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </Col> -->
            <Col class="search-item">
              <span class="search-label">上架状态：</span>
              <Select v-model="saleType" @on-change="doSearch" style="width:180px" placeholder='请选择'>
                <Option v-for="item in saleList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </Col>
            <Col class="search-item">
              <Button class="search-btn" type='primary' @click="doSearch">查询</Button>
            </Col>
            <Col class="search-item">
              <Button class="search-btn" @click="reset">重置</Button>
            </Col>
          </Row>
          <Row type="flex" justify="end" class="search-item-right">
            <Col class="search-item">
              <Button class="search-btn" style="width: 120px" @click='displayDraw' v-if="hasPermission('moms:product:shopgamecardsortsetting')">显示排序设置</Button>
            </Col>
          </Row>
          </Row>
        </Row>
      </div>
      <Table stripe class="table-list" :columns="columns" :data="tableData" :loading="loading" :height="tableHeight">
        <template slot-scope="{ row }" slot="imgUrl">
          <div>
            <img :src="row.thumbnail ? row.thumbnail: defaultUrl" alt="" style="width: 90px;height: 60px;display: block;margin: 15px 0;">
          </div>
        </template>
        <template slot-scope="{ row }" slot="goodsStatus">
          <span>{{row.channelGoodsStatus === 1 ? '已上架' : (row.channelGoodsStatus === 0 || row.channelGoodsStatus === 2 ) ? '已下架': ''}}</span>
        </template>
        <!-- <template slot-scope="{ row }" slot="status">
          <i-switch size="large" v-model='row.isShow' @on-change='changeStatus(row)' :disabled="!hasPermission('moms:product:shopgamecardvisiblesetting')">
            <span slot="open">显示</span>
            <span slot="close">隐藏</span>
          </i-switch>
        </template> -->
        <template slot-scope="{ row }" slot="standardPrice">
          <span v-if='row.goodsPrices.length>0'>{{row.goodsPrices[0].amount.toFixed(2)}}</span>
        </template>
        <template slot-scope="{ row }" slot="time">
          <span>{{row.listingAt + '至' + row.delistingAt}}</span>
        </template>
        <template slot-scope="{ row }" slot="action">
          <Poptip confirm title="确认下架吗？" transfer  style="text-align:left" @on-ok="sureDown(row)" @on-cancel="cancelDown(row)">
            <i class="iconsys iconxiajia" title="下架" v-if="row.channelGoodsStatus === 1"></i>
          </Poptip>
          <i class="iconsys iconshangjia" title="重新上架" v-if="row.channelGoodsStatus === 0 || row.channelGoodsStatus === 2" @click='againUp(row)'></i>
        </template>
      </Table>
      <Row type='flex' justify="end" style='padding: 20px'>
        <Col>
          <Page :total="pageObj.total"
                :page-size='pageObj.pageSize'
                :current='pageObj.pageIndex'
                :page-size-opts='[20,50,100,200]'
                show-total
                show-sizer
                @on-change='changePageIndex'
                @on-page-size-change='changePageSize' />
        </Col>
      </Row>
      <Modal v-model="modalShow" title="重新上架">
        <Form ref="formInline" :model="formInline" :rules="ruleInline" :label-width="80" style="width: 340px;margin: 20px 0 0 20px">
          <FormItem prop="goodsName" label="商品名称">
            <Input placeholder="请输入" v-model='formInline.goodsName' style="width: 260px;" disabled></Input>
          </FormItem>
          <FormItem prop="upTime" label="上架时间">
            <DatePicker :value="formInline.upTime" type="datetime" :editable="false" placeholder="请选择" style="width: 260px;" @on-change="activityStartChange" :options="activityStartOptions"></DatePicker>
          </FormItem>
          <FormItem prop="downTime" label="下架时间">
              <DatePicker :value="formInline.downTime" type="datetime" :editable="false" placeholder="请选择" style="width: 260px;" @on-change="activityEndChange" :options="activityEndOptions"></DatePicker>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button style="width:78px;margin-right:10px" @click="modalShow = false">取消</Button>
          <Button type="primary" style="width:78px" @click="onSure">确定</Button>
        </div>
      </Modal>
      <display-order v-model="drawShow" :value='drawShow' :transmit='transmit' @closeDraw='closeDraw' @sureSelect='sureSelect'></display-order>
    </div>
  </template>

<script>
import DisplayOrder from '@/view/components/display-order/index.vue'
import { getGoodsList } from '@/api/commondity/index'
import mixins from './minxin.js'
export default {
  name: 'gamecard_list',
  components: { DisplayOrder },
  mixins: [mixins],
  data () {
    return {
      transmit: {
        goodsKind: '03-0305',
        type: '2',
        shopId: this.$route.params.id
      }
    }
  },
  methods: {
    getData () {
      this.loading = true
      getGoodsList({
        merchantId: this.$store.state.user.merchantId,
        isShow: this.status,
        channelGoodsStatus: this.saleType,
        skuName: this.pageObj.searchName,
        shopId: this.$route.params.id,
        goodsKind: '03-0305',
        offset: this.pageObj.pageSize * (this.pageObj.pageIndex - 1),
        limit: this.pageObj.pageSize,
        sortBy: 'sortNo'
      }).then(res => {
        this.loading = false
        const result = res.data || {}
        if (result.status === 200) {
          this.handleFuc(result)
        } else {
          this.$Message.error(`${result.error}`)
        }
      })
    }
  }
}
</script>

<style lang="less">
#gamecard_list{
  .search-box .search-item-right {
    width: 20%;
  }
  .search-box .search-item-left{
    width: 80%;
  }
}
</style>
